<template>
  <div>

    <div class="sreach">
      <div style="display: flex">
        <el-input
            placeholder="请输入 '商品名称' 或 '商品类型'"
            v-model="input"
            clearable
            style="margin-right: 10px;width: 500px"
        >
        </el-input>
        <el-button style=" float: right" type="primary" @click="Search"> 搜索</el-button>
      </div>
    </div>

    <div class="table">
      <el-table
          :data="AdministratorGoods.slice((this.$store.state.currentPage-1)*pageSize,this.$store.state.currentPage*pageSize)"
          height="650"
          border
          style="width: 100%">
        <el-table-column
            prop="goodsname"
            label="商品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goodsInfo"
            label="商品信息">
        </el-table-column>
        <el-table-column
            prop="goodsprice"
            label="商品价格 ( ￥ ) "
            width="180">
        </el-table-column>
        <el-table-column
            prop="goodstype"
            label="商品类型"
            width="150">
        </el-table-column>

        <el-table-column
            label="商品图片"
            width="220">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImg" style="width: 100%; height: 180px">
          </template>
        </el-table-column>

        <el-table-column
            prop="kucun"
            label="商品库存 ( 件 ) "
            width="150">
        </el-table-column>

        <el-table-column
            prop="AddData"
            label="添加时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="AddActor"
            label="添加者账号"
            width="150">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button @click="Delete(scope.row.id)" type="danger" size="small">删除</el-button>
            <el-button type="info" size="small" @click="Update(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!--  分页处理  -->
      <el-card>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.$store.state.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="AdministratorGoods.length">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>

import Request from "@/Network/axios";

export default {
  name: "IsgoodsMana",

  data() {
    return {
      pageSize: 10,
      goodsInfos: [],
      AdministratorGoods: [],
      input: ''
    }
  },

  methods: {
    //每页几条
    handleSizeChange(val) {
      this.pageSize = val
    },

    //当前页码
    handleCurrentChange(val) {
      this.$store.state.currentPage = val;
    },

    // 删除商品
    Delete(id) {
      console.log(id)
    },

    // 修改商品
    Update(goodsInfo) {
      console.log(goodsInfo)
    },

    // 搜索商品信息
    Search() {
      if (this.input === '') {
        return this.AdministratorGoods = this.goodsInfos
      }

      let sreachAdministratorGoods = [];
      sreachAdministratorGoods = this.AdministratorGoods.filter(item => {
        return item.goodsname.search(this.input) !== -1 || item.goodstype.search(this.input) !== -1
      })
      this.AdministratorGoods = sreachAdministratorGoods
      this.input = ''

    },
  },

  mounted() {
    Request({
      url: '/user/getAdministratorGoods',
      method: 'post',
      data: {
        username: localStorage.getItem('username')
      }
    }).then(res => {
      this.goodsInfos = res.data.data
      this.AdministratorGoods = this.goodsInfos
    }).catch(err => {
      console.log(err)
    })
  }

}

</script>

<style scoped>

.sreach {
  width: 50vw;
  position: relative;
  margin-top: 30px;
  left: 40px;
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table {
  margin: 10px 40px 0 40px;
}
</style>